<template>
    <div>
      <h2>toRefs</h2>
      <p>
        toRefs将reactive包装的对象，所有属性都通过ref包装一次
      </p>
      <p>
        formData.name:
        <input type="text" v-model="formData.name" />
        {{ name }}
      </p>
      <p>
        formData.age: <input type="text" v-model="formData.age" />
        {{ formData.age }}
      </p>
      <p>
        name（toRefs）: <input type="text" v-model="name" />
        {{ name }}
      </p>
      <p>
        age（toRefs）: <input type="text" v-model="age" />
        {{ age }}
      </p>
      
    </div>
  </template>
      
      <script lang="ts">
  import { reactive, toRefs } from "vue";
  
  export default {
    setup() {
      const formData = reactive({
        name: "hydra",
        age: 35,
      });

      // 解构，如果直接解构，name和age会失去响应式
      // 需要使用toRefs包装reactive对象之后，再来解构
      // toRefs就是toRef的高级版本：把整个对象的属性都包装一遍
      // roRef只选择某一个属性包装
      const {name,age} = toRefs(formData);
  
  
      return {
        formData,
        name,
        age
      };
    },
  };
  </script>
      
      <style scoped>
  </style>